<template>
	<div class="coming">
		<div v-html="mostExpect"></div>
		<movieList :movieList="movieList"></movieList>
	</div>
</template>
<script>
import movieList from '@/components/MovieList.vue'

export default {
	components: {
		movieList
	},
	props: {
		movieList: {
			type: Array
		}
	},
	data() {
		return {
			mostExpect: ''
		}
	},
	methods: {},
	async mounted() {
		const { data: data } = await this.$http.get('/ajax/topRatedMovies', {
			params: {}
		})
		this.mostExpect = data
	}
}
</script>

<style scoped>
.coming /deep/ .top-rated {
	padding: 12px 0 12px 15px;
	background-color: #fff;
	margin-bottom: 10px;
}
.coming /deep/ .top-rated p {
	margin: 0;
	font-size: 14px;
	color: #333;
	margin-bottom: 12px;
}
.coming /deep/ .top-rated .top-rated-list {
	overflow: scroll;
	white-space: nowrap;
}

.coming /deep/ .top-rated .top-rated-list .top-rated-item {
	display: inline-block;
	width: 85px;
	overflow: hidden;
	margin-right: 10px;
}

.coming /deep/ .top-rated .top-rated-list .top-rated-item .poster {
	width: 85px;
	height: 115px;
	position: relative;
	margin-bottom: 6px;
}
.coming /deep/ .top-rated .top-rated-list .top-rated-item img {
	width: 100%;
	height: 100%;
	display: block;
}

.coming /deep/ .top-rated .top-rated-list .top-rated-item .wish-bg {
	display: inline-block;
	width: 100%;
	height: 35px;
	position: absolute;
	bottom: 0;
	background-image: -webkit-linear-gradient(top, rgba(77, 77, 77, 0), #000);
	background-image: linear-gradient(-180deg, rgba(77, 77, 77, 0), #000);
}
.coming /deep/ .top-rated .top-rated-list .top-rated-item .score,
.coming /deep/ .top-rated .top-rated-list .top-rated-item .wish {
	position: absolute;
	left: 4px;
	bottom: 2px;
	color: #faaf00;
	font-size: 11px;
	font-weight: 600;
}
.coming /deep/ .top-rated .top-rated-list .top-rated-item .name {
	margin: 0;
	font-size: 13px;
	color: #222;
	margin-bottom: 3px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.coming /deep/ .top-rated .top-rated-list .top-rated-item .default-img-bg {
	background-color: #e1e1e1;
	background-size: 100% 100%;
}
</style>